<template>
  <div class="bigBox">
    <el-container>
    <el-header>
      <div class="menu">
        <el-menu 
        :default-active="activeIndex" 
        class="el-menu-demo" 
        mode="horizontal" 
        @select="handleSelect">
        <el-menu-item index="user">用户</el-menu-item>
        <el-menu-item index="stheme">帖子</el-menu-item>
      </el-menu>
      </div>
    </el-header>
    <el-main>
      <div v-if="activeIndex == 'user'">
         <div class="bigboxUser" v-if="user != null && user!= undefined ">
          <div class="message">
            <div class="left">
              <img src="../../assets/images/OIP-C.jpg" alt="">
            </div>
            <div class="right">
              <div class="name">{{user.user_name}}</div>
              <div class="detail">
                <span>性别：{{user.user_sex == 1?'女':'男'}}</span>
                <span>年龄:{{user.user_age}}</span>
                <span>粉丝数：{{user.following_num}}</span>
              </div>
                <div class="_button">
                <el-button>关注</el-button>
                </div>
            </div>
          </div>
        </div>
          <div v-else>
            用户不存在
          </div>
      </div>
      <div v-else>
          <div class="bigboxTheme" v-if="theme_list.length>0">
            <div class="themeMessage" v-for="(item, i) in theme_list">
              <div class="top">
                <div class="title">{{item.theme_post.theme_post_title}}</div>
                <div class="name">用户名：{{item.user.user_name}}</div>
              </div>
              <div class="contain">{{item.theme_post.theme_post_contain}}</div>
            </div>
          </div>
          <div v-else>
            查不到帖子
          </div>
      </div>
    </el-main>
  </el-container>
  </div>
</template>

<script>
import {searchPersonbyName} from  "@/api";
import {searchThemebyTitle} from  "@/api";
import {getPersonbyId} from "@/api";
export default {
  data () {
    return {
       activeIndex: 'user',
       message:'',
       user:{},
       theme_list:[]
    }
  },
  created () {
    this.message = this.$route.params.message
    console.log("message",this.message);
    let _temp = this.message
    let that = this
    searchPersonbyName(_temp)
      .then(res => {
        console.log(res.data);
        that.user = res.data.data
      })
      .catch(() => {});
      console.log("user",this.user);
    searchThemebyTitle(_temp)
      .then(res => {
        console.log("temp",res.data.data);
        let datatheme = res.data.data
        let temp_contain = []
        for(let i of datatheme) {
          let temp = {}
          temp.theme_post = i;
          console.log("1111",i);
          temp.user = new Object()
          getPersonbyId(i.user_id)
          .then(res => {
            console.log("tempUser",res.data.data);
            temp.user  = res.data.data;
          })
          .catch(() => {});
          temp_contain.push(temp)
        }
        that.theme_list = temp_contain
        console.log("theme_list",that.theme_list);
      })
      .catch(() => {});
  },
  methods: {
     handleSelect(key, keyPath) {
       console.log(keyPath);
        this.activeIndex = key
        console.log(this.user);
         console.log(this.theme_list);
      }
  }
}
</script>

<style lang="less" scoped>
.bigBox{
  height: 720px;
  .bigboxUser{
    width: 400px;
    height: 120px;
    .message{
      display: flex;
      flex-direction: row;
      .left{
        width: 100px;
        height: 100px;
        border-radius: 50%;
        img{
          border-radius: 50%;
        }
      }
      .right{
        margin-top:30px ;
        margin-left: 30px;
        div{
          text-align: left;
        }
        span{
          margin-right: 10px;
        }
        ._button{
          margin: 10px 0;
          margin-left: 180px;
        }
      }
    }
  }
    .bigboxTheme{
    width: 500px;
    .themeMessage{
      display: flex;
      flex-direction: column;
      padding:0 20px;
      border-bottom: 1px solid black;
      div{
        text-align: left;
      }
      .top{
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        .title{
          width:75%;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 1;
          -webkit-box-orient: vertical;
        }
        .name{
          color: rgb(126, 126, 126);
        }
      }
      .contain{
         overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          line-height: 40px;
      }
    }
  }
}



</style>